<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>Documentation - jquery.acts_as_tree_table</title>
 	<!--<link href="stylesheets/master.css" rel="stylesheet" type="text/css" />-->
	<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>

	<!-- BEGIN Plugin Code -->
	
 	<link href="css/jquery.acts_as_tree_table.css" rel="stylesheet" type="text/css" />
	<script type="text/javascript" src="js/jquery.acts_as_tree_table.js"></script>
	<script type="text/javascript">
	
	$(document).ready(function() {
		$(".example").acts_as_tree_table();

		$("#example3").acts_as_tree_table({
			expandable: false
		});
	});
	
	</script>

	<!-- END Plugin Code -->
</head>
<body>

<h3>4.1 <a name="example-1">Displaying a directory structure</a></h3>

<table class="example">
	<caption>Example 1: Displaying a directory structure.</caption>
	<thead>
		<tr>
			<th>Title</th>
			<th>Size</th>
			<th>Kind</th>
		</tr>
	</thead>
	<tbody>
		<tr id="node-20">
			<td><span class="file">CHANGELOG</span></td>
			<td>4 KB</td>
			<td>Plain text</td>
		</tr>

		<tr id="node-00001">
			<td><span class="folder">doc</span></td>
			<td>--</td>
			<td>Folder</td>
		</tr>

		<tr id="node-2" class="child-of-node-00001">
			<td><span class="folder">images</span></td>
			<td>--</td>
			<td>Folder</td>
		</tr>

		<tr id="node-8" class="child-of-node-2">
			<td><span class="file">bg-table-thead.png</span></td>
			<td>52 KB</td>
			<td>Portable Network Graphics image</td>
		</tr>

		<tr id="node-9" class="child-of-node-2">
			<td><span class="file">folder.png</span></td>
			<td>4 KB</td>
			<td>Portable Network Graphics image</td>
		</tr>

		<tr id="node-10" class="child-of-node-2">
			<td><span class="file">page_white_text.png</span></td>
			<td>4 KB</td>
			<td>Portable Network Graphics image</td>
		</tr>

		<tr id="node-3" class="child-of-node-1">
			<td><span class="file">index.html</span></td>
			<td>4 KB</td>
			<td>HTML document</td>
		</tr>

		<tr id="node-4" class="child-of-node-1">
			<td><span class="folder">javascripts</span></td>
			<td>--</td>
			<td>Folder</td>
		</tr>

		<tr id="node-5" class="child-of-node-4">
			<td><span class="file">jquery.js</span></td>
			<td>56 KB</td>
			<td>JavaScript source</td>
		</tr>

		<tr id="node-6" class="child-of-node-1">
			<td><span class="folder">stylesheets</span></td>
			<td>--</td>
			<td>Folder</td>
		</tr>

		<tr id="node-7" class="child-of-node-6">
			<td><span class="file">master.css</span></td>
			<td>4 KB</td>
			<td>CSS style sheet</td>
		</tr>

		<tr id="node-14">
			<td><span class="file">MIT-LICENSE</span></td>
			<td>4 KB</td>
			<td>Plain text</td>
		</tr>

		<tr id="node-18">
			<td><span class="file">README.markdown</span></td>
			<td>4 KB</td>
			<td>Markdown document</td>
		</tr>

		<tr id="node-11">
			<td><span class="folder">src</span></td>
			<td>--</td>
			<td>Folder</td>
		</tr>

		<tr id="node-12" class="child-of-node-11">
			<td><span class="folder">images</span></td>
			<td>--</td>
			<td>Folder</td>
		</tr>

		<tr id="node-15" class="child-of-node-12">
			<td><span class="file">bullet_toggle_minus.png</span></td>
			<td>4 KB</td>
			<td>Portable Network Graphics image</td>
		</tr>

		<tr id="node-16" class="child-of-node-12">
			<td><span class="file">bullet_toggle_plus.png</span></td>
			<td>4 KB</td>
			<td>Portable Network Graphics image</td>
		</tr>

		<tr id="node-13" class="child-of-node-11">
			<td><span class="folder">stylesheets</span></td>
			<td>--</td>
			<td>Folder</td>
		</tr>

		<tr id="node-17" class="child-of-node-13">
			<td><span class="file">jquery.acts_as_tree_table.css</span></td>
			<td>4 KB</td>
			<td>CSS style sheet</td>
		</tr>

		<tr id="node-19" class="child-of-node-11">
			<td><span class="file">jquery.acts_as_tree_table.js</span></td>
			<td>8 KB</td>
			<td>JavaScript source</td>
		</tr>

	</tbody>
</table>

<h3>4.2 <a name="example-2">A more advanced tree</a></h3>

<table class="example">
	<caption>Example 2: A more advanced tree.</caption>
	<tr id="ex2-node-1">
		<td>Node 1</td>
	</tr>
	<tr id="ex2-node-1-1" class="child-of-ex2-node-1">
		<td>Node 1.1</td>
	</tr>
	<tr id="ex2-node-1-2" class="child-of-ex2-node-1">
		<td>Node 1.2</td>
	</tr>
	<tr id="ex2-node-1-3" class="child-of-ex2-node-1">
		<td>Node 1.3</td>
	</tr>
	<tr id="ex2-node-2">
		<td>Node 2</td>
	</tr>
	<tr id="ex2-node-2-1" class="child-of-ex2-node-2">
		<td>Node 2.1</td>
	</tr>
	<tr id="ex2-node-2-1-1" class="child-of-ex2-node-2-1">
		<td>Node 2.1.1</td>
	</tr>
	<tr id="ex2-node-2-2" class="child-of-ex2-node-2">
		<td>Node 2.2</td>
	</tr>
	<tr id="ex2-node-2-2-1" class="child-of-ex2-node-2-2">
		<td>Node 2.2.1</td>
	</tr>
	<tr id="ex2-node-2-2-1-1" class="child-of-ex2-node-2-2-1">
		<td>Node 2.2.1.1</td>
	</tr>
	<tr id="ex2-node-2-2-2" class="child-of-ex2-node-2-2">
		<td>Node 2.2.2</td>
	</tr>
</table>

<h3>4.3 <a name="example-3">An advanced tree that is not collapsable</a></h3>

<pre class="listing">
$("#example3").acts_as_tree_table({
	expandable: false
});
</pre>	

<table id="example3">
	<caption>Example 3: An advanced tree that is not collapsable.</caption>
	<thead>
		<tr>
			<th>Tree column</th>
			<th>Column 2</th>
		</tr>
	</thead>
	<tbody>
		<tr id="ex3-node-1">
			<td>Node 1</td>
			<td>Second column</td>
		</tr>
		<tr id="ex3-node-1-1" class="child-of-ex3-node-1">
			<td>Node 1.1</td>
			<td>Second column</td>
		</tr>
		<tr id="ex3-node-1-2" class="child-of-ex3-node-1">
			<td>Node 1.2</td>
			<td>Second column</td>
		</tr>
		<tr id="ex3-node-1-3" class="child-of-ex3-node-1">
			<td>Node 1.3</td>
			<td>Second column</td>
		</tr>
		<tr id="ex3-node-2">
			<td>Node 2</td>
			<td>Second column</td>
		</tr>
		<tr id="ex3-node-2-1" class="child-of-ex3-node-2">
			<td>Node 2.1</td>
			<td>Second column</td>
		</tr>
		<tr id="ex3-node-2-1-1" class="child-of-ex3-node-2-1">
			<td>Node 2.1.1</td>
			<td>Second column</td>
		</tr>
		<tr id="ex3-node-2-2" class="child-of-ex3-node-2">
			<td>Node 2.2</td>
			<td>Second column</td>
		</tr>
		<tr id="ex3-node-2-2-1" class="child-of-ex3-node-2-2">
			<td>Node 2.2.1</td>
			<td>Second column</td>
		</tr>
		<tr id="ex3-node-2-2-2" class="child-of-ex3-node-2-2">
			<td>Node 2.2.2</td>
			<td>Second column</td>
		</tr>
	</tbody>
</table>

</body>
</html>